<template>
    <div class="searchTables" style="display: flex; width: 30%; margin-bottom: 10px;">
        <a-button type="primary" size="large" style="margin-right: 20px;">新增</a-button>
        <a-input-search v-model:value="value" placeholder="input search text" enter-button="SearchByName" size="large" @search="onSearch" />
    </div>
    <div class="table">
        <a-table :columns="columns" :data-source="data" @resizeColumn="handleResizeColumn">
            <template #headerCell="{ column }">
                <template v-if="column.key === 'name'">
                    <span>
                        <smile-outlined />
                        Name
                    </span>
                </template>
            </template>
    
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                    <router-link to="">
                        {{ record.name }}
                    </router-link>
                </template>
                <template v-else-if="column.key === 'tags'">
                    <span>
                        <a-tag v-for="tag in record.tags" :key="tag" :color="tag === 'Admin' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                            {{ tag.toUpperCase() }}
                        </a-tag>
                    </span>
                </template>
                <template v-else-if="column.key === 'action'">
                    <span>
                        <a-button type="primary">编辑</a-button>
                        <a-divider type="vertical" />
                        <a-button type="primary" danger>删除</a-button>
                    </span>
                </template>
            </template>
        </a-table>
    </div>
    </template>
    
    <script>
    import {
        SmileOutlined,
        DownOutlined
    } from '@ant-design/icons-vue';
    import {
        defineComponent,
        ref
    } from 'vue';
    const data = [{
        key: '1',
        name: 'Admin',
        tags: ['Admin', '管理员'],
    }, {
        key: '2',
        name: '张三',
        tags: ['用户'],
    }, {
        key: '3',
        name: '李四',
        tags: ['用户'],
    }];
    export default defineComponent({
        components: {
            SmileOutlined,
            DownOutlined,
        },
        setup() {
            const columns = ref([{
                dataIndex: 'name',
                key: 'name',
                resizable: true,
                width: 150,
            }, {
                title: 'Tags',
                key: 'tags',
                dataIndex: 'tags',
            }, {
                title: 'Action',
                key: 'action',
            }]);
            return {
                data,
                columns,
                handleResizeColumn: (w, col) => {
                    col.width = w;
                },
            };
        },
    });
    </script>
    